<%--
  Created by IntelliJ IDEA.
  User: LT
  Date: 2018-10-24
  Time: 10:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="table/bootstrap-table.min.css" rel="stylesheet">
    <script type="text/javascript" src="bootstrap/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="table/bootstrap-table.min.js"></script>
    <script type="text/javascript" src="table/locale/bootstrap-table-zh-CN.min.js"></script>

    <script>
        $(function(){
            $("#tb").bootstrapTable({
                url:'userServlet?method=query',
                height:500,
                pagination:true,
                pageSize:5,
                pageList:[5,10,15],
                search:true,
                toolbar:'#oper',
                singleSelect:true,
                clickToSelect:true,

                showColumns:true,
      //          showRefresh:true,
                uniqueId:'id',
                //设置为 true 可以显示详细页面模式。
                detailView:true,
                //当点击详细图标展开详细页面的时候触发。
                onExpandRow:function(index, row, $detail){
                   // var table = $detail.html("<table></table>").find("table") ;
                  //  $("table").bootstrapTable({
                    $detail.html("邮件:" + row.email + "<br/> 性别:" + row.gender)
                },
                columns:[
                    {
                        checkbox:true,
                    },
                    {
                        field:'id',
                        title:'编号'
                    },
                    {
                        field:'name',
                        title:'姓名'
                    },
                    {
                        field:'address',
                        title:'地址'
                    },
                    {
                        title:'操作',
                        formatter:function (value,row,index) {
                            return "<a href='javascript:del("+row.id+")'>删除</a> &nbsp; <a href='javascript:toup("+row.id+")'>修改</a>" ;
                        }
                    }
                ]
            }) ;
        }) ;

        function toup(id) {
            myid = id ;
            //1.打开对话框
            $("#modal-add").modal('show') ;
            //2.当模态框完全打开后绑定数据
            var i = 0 ;

            $("#modal-add").on("shown.bs.modal",function (e) {
                //send ajax
                if (++i ==1){
                    //修改事件
                    $("#btn").attr('onclick','doup()') ;
                    $("input[name='gender']").attr('checked',false) ;
                    $.post('userServlet?method=getUser',{'id':id},function (data) {
                        var mydata = eval("("+data+")") ;
                        $("#username").val(mydata.name) ;
                        $("#address").val(mydata.address) ;
                        $("#email").val(mydata.email) ;
                        var sex = mydata.gender ;
                        $("input[name='gender'][value='"+sex+"']").attr("checked",'checked') ;
                    })
                }
            })
        }

        function doup() {
            //1.获取参数
            var  username = $("#username").val() ;
            var address = $("#address").val() ;
            var email = $("#email").val() ;
            var gender=$('input:radio[name="gender"]:checked').val();
            //2.发送ajax
            $.post('userServlet?method=up',{'id':myid,'username':username,'address':address,'email':email, 'gender':gender},function (data) {
                var mydata = eval("("+data+")") ;
                $("#tb").bootstrapTable('load',mydata) ;
                //关闭对话框
                $("#modal-add").modal('hide') ;
            })
        }


        var myid  ;
        function del(id) {
            myid = id ;
            //先打一个对话框，提示是否删除
            $("#modelId").modal('show') ;
           // send ajax

        }


        function  dodel(){
              $.post('userServlet?method=del',{'id':myid},function (data) {
             //字符串转换成json
             var mydata = eval("("+data+")") ;
             //给表格绑定数据
             $("#tb").bootstrapTable('load',mydata) ;
             //关闭对话框
                  $("#modelId").modal('hide') ;
         })
        }

        function toadd() {
            //1.打开对话框
            $("#modal-add").modal('show') ;
        }

        function doadd() {
            //1.获取参数
            var  username = $("#username").val() ;
            var address = $("#address").val() ;
            var email = $("#email").val() ;
            var gender=$('input:radio[name="gender"]:checked').val();
           //2.发送ajax
            $.post('userServlet?method=add',{'username':username,'address':address,'email':email, 'gender':gender},function (data) {
                var mydata = eval("("+data+")") ;
                $("#tb").bootstrapTable('load',mydata) ;
                //关闭对话框
                $("#modal-add").modal('hide') ;
            })
        }


        function toup1() {
            //1.表格中有没有选中行
            var arr = $("#tb").bootstrapTable('getSelections') ;
            if (arr.length==0){
                alert("请选择要修改的行！") ;
            }
            else{
                var row = arr[0] ;
                var id = row.id ;
                //2.获取选中行的数据
                var data = $("#tb").bootstrapTable('getRowByUniqueId',id) ;
                alert(data.name + "---" + data.address) ;
            }
        }
    </script>
    <style>
        body{
            padding: 30px;
        }
    </style>
</head>
<body>

<div id="oper">
    <button onclick="toadd()" style="" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span>增加</button>

    <button onclick="toup1()" style="" class="btn btn-primary"><span class="glyphicon glyphicon-pencil"></span>修改</button>
</div>

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">用户列表</h3>
    </div>
    <div class="panel-body">
        <div class="container">
            <table id="tb"></table>
        </div>

    </div>
</div>


<!-- Modal -->
<div class="modal fade" id="modelId" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="modelTitleId">提示信息</h4>

            </div>
            <div class="modal-body">
                真的要删除吗?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button onclick="dodel()" type="button" class="btn btn-primary">确定</button>
            </div>
        </div>
    </div>
</div>


<!--增加对话框-->
<div class="modal fade" id="modal-add">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">增加用户</h4>
            </div>
            <div class="modal-body">
                <form action="" method="post" class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="username" class="col-sm-2 control-label">用户名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="username" name="username">
                        </div>

                    </div>
                    <div class="form-group">
                        <label for="address" class="col-sm-2 control-label">地址</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="address" name="address">
                        </div>

                    </div>
                    <div class="form-group">
                        <label for="email" class="col-sm-2 control-label">邮件</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="email" name="email">
                        </div>

                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <div class="radio-inline">
                                <input type="radio"   name="gender" value="男">男
                            </div>
                            <div class="radio-inline">
                                <input type="radio"   name="gender" value="女">女
                            </div>


                        </div>

                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button id="btn" onclick="doadd()" type="button" class="btn btn-primary">提交</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->





</body>
</html>
